<template>
	<view class="custom-tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
		<!-- 毛玻璃背景 -->
		<view class="tabbar-background"></view>
		
		<!-- 分割线 -->
		<view class="tabbar-border"></view>
		
		<!-- 导航项容器 -->
		<view class="tabbar-content">
			<view 
				class="tabbar-item" 
				v-for="(item, index) in tabList" 
				:key="index"
				@click="switchTab(item.pagePath, index)"
			>
				<view class="item-container" :class="{ active: currentIndex === index }">
					<!-- 图标容器 -->
					<view class="icon-container">
						<image 
							:src="currentIndex === index ? item.selectedIconPath : item.iconPath" 
							class="tab-icon"
							mode="aspectFit"
						></image>
						<!-- 激活状态的光圈效果 -->
						<view class="icon-glow" v-if="currentIndex === index"></view>
					</view>
					<!-- 文字 -->
					<text class="tab-text" :class="{ active: currentIndex === index }">
						{{ item.text }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabBar',
	data() {
		return {
			currentIndex: 0,
			safeAreaBottom: 0,
			tabList: [
				{
					pagePath: '/pages/index/index',
								iconPath: 'https://i.ibb.co/jZ4sBbgm/mine.png',
			selectedIconPath: 'https://i.ibb.co/jZ4sBbgm/mine.png',
					text: '首页'
				},
				{
					pagePath: '/pages/chat/doubao_chat',
								iconPath: 'https://i.ibb.co/jZ4sBbgm/mine.png',
			selectedIconPath: 'https://i.ibb.co/jZ4sBbgm/mine.png',
					text: 'AI助手'
				},
				{
					pagePath: '/pages/user/profile/index',
								iconPath: 'https://i.ibb.co/jZ4sBbgm/mine.png',
			selectedIconPath: 'https://i.ibb.co/jZ4sBbgm/mine.png',
					text: '我的'
				}
			]
		}
	},
	mounted() {
		// 获取安全区域
		this.getSafeArea();
		// 获取当前页面索引
		this.getCurrentPageIndex();
	},
	methods: {
		getSafeArea() {
			const systemInfo = uni.getSystemInfoSync();
			this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
		},
		
		getCurrentPageIndex() {
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const currentRoute = '/' + currentPage.route;
			
			this.currentIndex = this.tabList.findIndex(item => item.pagePath === currentRoute);
			if (this.currentIndex === -1) this.currentIndex = 0;
		},
		
		switchTab(pagePath, index) {
			if (this.currentIndex === index) return;
			
			this.currentIndex = index;
			uni.switchTab({
				url: pagePath,
				fail: (err) => {
					console.error('切换页面失败:', err);
				}
			});
		}
	}
}
</script>

<style scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: 120rpx;
	width: 100%;
}

.tabbar-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
}

.tabbar-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1rpx;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(0, 0, 0, 0.08) 20%, 
		rgba(0, 0, 0, 0.08) 80%, 
		transparent 100%);
}

.tabbar-content {
	display: flex;
	height: 120rpx;
	align-items: center;
	justify-content: space-around;
	position: relative;
	z-index: 2;
	padding: 0 40rpx;
}

.tabbar-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.item-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16rpx 20rpx;
	border-radius: 20rpx;
	transition: all 0.3s ease;
	position: relative;
	min-width: 100rpx;
}

.item-container.active {
	background: rgba(74, 144, 226, 0.08);
	transform: translateY(-4rpx);
}

.icon-container {
	position: relative;
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tab-icon {
	width: 48rpx;
	height: 48rpx;
	transition: all 0.3s ease;
}

.item-container.active .tab-icon {
	transform: scale(1.1);
}

.icon-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60rpx;
	height: 60rpx;
	background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
	from {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(0.8);
	}
	to {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1.2);
	}
}

.tab-text {
	font-size: 20rpx;
	color: #8E8E93;
	font-weight: 500;
	transition: all 0.3s ease;
	letter-spacing: 0.5rpx;
}

.tab-text.active {
	color: #4a90e2;
	font-weight: 600;
	transform: scale(1.05);
}

/* 激活状态的特殊效果 */
.item-container.active::before {
	content: '';
	position: absolute;
	top: -2rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 6rpx;
	height: 6rpx;
	background: #4a90e2;
	border-radius: 50%;
	box-shadow: 0 0 12rpx rgba(74, 144, 226, 0.6);
}

/* 不同设备适配 */
@media screen and (max-width: 375px) {
	.tabbar-content {
		padding: 0 20rpx;
	}
	
	.tab-icon {
		width: 44rpx;
		height: 44rpx;
	}
	
	.icon-container {
		width: 44rpx;
		height: 44rpx;
	}
	
	.tab-text {
		font-size: 18rpx;
	}
}

/* iPhone X 系列适配 */
@supports (padding: max(0px)) {
	.custom-tabbar {
		padding-bottom: max(34rpx, env(safe-area-inset-bottom));
	}
}
</style>